<template>
  <div>
    <div class="list-relative" >
      <div v-show="currentitem" class="fixed-title offset" :style="offsettopabsolate">{{currentitem.title}}</div>
      <div class="list-shortcut" >
       <ul  class="list-shortcut">
          <li v-for="(item, index) in shortcutList" :key="index+'shortcut'" class="item"
              :style="colormethod(item).colors"
          @click="scrolltoitem(index,item)"
          >
            {{item}}
          </li>
        </ul>
      </div>
    </div>
  <div class="recommend2"  ref="singerlistview">
       <div  class="listview "
            ref="listview">
         <div v-for="(group,index) in datas" :key="index+'group'" :ref="index+'group'">
        <div class="fixed-title">{{group.title}}</div>
        <div  class="list-group-item" @click="selectItem(item)" v-for="(item,index) in group.items" :key="index+'item'">
          <!--<img  class="avatar" :src="item.avatar">-->
          <img  class="avatar" v-lazy="item.avatar">
          <span class="name">{{item.name}}</span>
        </div>
      </div>
    </div>
  </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import BScroll from 'better-scroll'
  import Loading from 'base/loading/loading'
  import {getData} from 'common/js/dom'
  const TITLE_HEIGHT = 30
  const ANCHOR_HEIGHT = 18
  export default {
    data(){
      return {
        colors:{color:'#ffcd32'},
        showoffset:false,
        offsettoplist:[],
        currentitem:'',
        offsettopabsolate:{
          left: '0px',
          top: '0px'
        }
      }
    },
    mounted () {
      let this_=this;
      this_.scroll = new BScroll(this_.$refs.singerlistview,{probeType:2,mouseWheel: true, click: true, tap: true })
      console.log('this_.$refs.singerlistview',this_.$refs.singerlistview)
      this_.scroll.refresh()
      this_.scroll.on('scroll',function (e) {
        console.log("this_.scroll:",e)
        if(!this_.offsettoplist.length){
          this_.getoffsettoplist()
          this_.currentitem=this_.offsettoplist[0]
          console.log('this_.offsettoplist',this_.offsettoplist)
        }else{
          this_.currentitem=this_.getindex(e.y);
        }
        console.log("document.scroll:",)
      })
      //
    },
    computed: {
      shortcutList() {
        return this.datas.map((group) => {
          return group.title.substr(0, 1)
        })
      }
    },
    props: {
      datas: {
        type: Array,
        default: []
      }
    },
    methods:{
      //  子路由歌手页面跳转。自定义事件
      selectItem(item) {
        this.$emit('select', item)
      },
      //  修改侧边栏颜色
      colormethod(item){
        if(this.currentitem&&this.currentitem.title.substr(0, 1)===item){
          //&&this.currentitem.title.substr(0, 1)==item
          // console.log('colormethod',this.currentitem)
          return {colors:this.colors,title:this.currentitem.title}
        }else{
          return {colors:{},title:''}
        }
      },
      //  滚动到指定元素
      scrolltoitem(index,item){
          let this_=this;
          console.log(index,item);
          if(!this.offsettoplist.length){
            this_.getoffsettoplist()
          }
          let y=this.offsettoplist[index].offsetTop;
          this_.currentitem=this.offsettoplist[index];
          console.log('y',y,this.offsettoplist[index]);
        // this.scroll.scrollToElement(this.$refs[index+'group'][0])
        this.scroll.scrollTo(0, -y);
      },
      //  获取各个元素所在的位置
      getoffsettoplist() {
        let this_=this;
        let length=this_.datas.length;
        for(let index=0;index<length;index++){
          let group=this_.datas[index];
          let m=this_.$refs[index+'group'][0];
          this_.offsettoplist.push({index2:index,dom:index+'group',offsetTop:m.offsetTop,title:group.title})
        }
      },
      //  根据当前滚动位置，获取当前是在哪个元素内部，并且设置当前样式位置
      getindex(y) {
        let this_=this;
        let item={};
        let flagmin=false;
        let flagmax=false;
        let flag=0;
        let length=this_.offsettoplist.length;
        for(let index=0;index<length;index++){
          let group=this_.offsettoplist[index];
          if(group.offsetTop>-y){
            flagmin=true;
          }
          if(group.offsetTop<-y){
            flagmax=true;
          }
          if(flagmin&&flagmax){
            item=group;
            flag=index;
            break;
          }
        }
        // console.log(this_.offsettoplist[0])
        // console.log(this_.offsettoplist[22])
        // item=flag?this_.offsettoplist[flag-1]:item;
        item=this_.offsettoplist[flag-1];
        let nextitem=(flag>(length-1))?this_.offsettoplist[0]:this_.offsettoplist[flag];
        if(item===undefined){
          item=this_.offsettoplist[length-1];
        }
        let top=nextitem.offsetTop-(-y);
        if(top>0&&top<=30){
          this_.offsettopabsolate={
            left: '0px',
            top: -(30-top)+'px'
          };
        }else{
          this_.offsettopabsolate={
            left: '0px',
            top: '0px'
          };
        }
        console.log(y,'group',flag,item.title,item.index2,item.offsetTop,nextitem.offsetTop)
        return item;
      },

    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  .actives
    color: #ffcd32;
  .offset
    position: relative
    left: 0
    top: 0
    height 30px
    overflow hidden
  .listview
    position: relative
    left: 0
    top: 0
    z-index: 50
  .fixed-title
    height: 30px
    text-align left
    line-height: 30px
    padding-left: 20px
    font-size: $font-size-small
    color: $color-text-l
    background: $color-highlight-background
  .list-group-item
    display: flex
    align-items: center
    padding: 20px 0 4px 30px
    .avatar
      width: 50px
      height: 50px
      border-radius: 50%
    .name
      margin-left: 20px
      color: $color-text-l
      font-size: $font-size-medium
  .list-relative
    position: relative
    z-index: 60
    left: 0
    top: 0
    height 1px
  .list-shortcut
    position: absolute
    right:0px
    top: 20px
    width: 20px
    padding: 20px 0
    border-radius: 10px
    text-align: center
    background: $color-background-d
    font-family: Helvetica
    .item
      padding: 3px
      line-height: 1
      color: $color-text-l
      font-size: $font-size-small
      &.current
        color: $color-theme
</style>
